<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>合同列表--合同详情</title>
    <link rel="icon" href="favicon.ico" type="images/ico">
    <meta name="author" content="dc">
    <link rel="stylesheet" type="text/css" href="/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.min.css">
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css"/>
    <!--固定table列-->
    <link href="/js/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/contractManager/user/contractDetail.css"/>
<!--    多选下拉-->
    <link rel="stylesheet" href="/css/bootstrap-multiselect.css" type="text/css"/>
    <link rel="stylesheet" href="/css/bootstrap-select.css" type="text/css"/>
    <!--时间选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" />
    <!--日期选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css" />
    <link rel="stylesheet" href="/css/input_tags.css" />
    <link rel="stylesheet" type="text/css" href="/css/daterangepicker.css" />
    <link rel="stylesheet" href="/css/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="/css/skin.css"/>
    <link rel="stylesheet" type="text/css" href="/css/viewer.css">
    <link rel="stylesheet" href="/css/customerManager/customerDetail.css"/>
    <script th:inline="javascript">
        var customerContract = [[${customerContract}]];
        // 合同附件
        var annexFilePath = customerContract.contractAnnexAccessUrl;
        // 审核附件
        var examineFilePath = customerContract.reviewAnnexAccessUrl;
        // console.log(customerContract)
    </script>
</head>
<body>
<div class="outerSphereBox">
    <div class="outerSphere">
        <div class="titleValue">
            <h1>合同详情</h1>
        </div>
    </div>
    <div class="titContant">
        <!--订单主键-->
        <input type="hidden" th:value="${customerContract?.productOrderId?:''}" id="productOrderId" name="productOrderId">
        <!--合同主键-->
        <input type="hidden" th:value="${customerContract?.contractId?:''}" id="contractId" name="contractId">
        <!--客户主键-->
        <input type="hidden" th:value="${customerContract?.customerId?:''}" id="customerId" name="customerId">
        <!--是否是侯欣雪-->
        <input type="hidden" th:value="${ifHou}" id="ifHou" name="ifHou">
        <!--1业绩明细进来的-->
        <input type="hidden" th:value="${jumpBs}" id="jumpBs" name="jumpBs">
        <table>
            <tr>
                <td>合同编号：<span class="text" th:text="${customerContract?.contractNumber?:''}"></span></td>
                <td>订单编号：
                    <a class="js-create-tab" data-title="订单详情" th:if="${not #strings.isEmpty(customerContract.orderNumber)}" th:attr="data-url=@{'/front/orderManager/orderDetail?productOrderId='+ ${customerContract.orderId} + '&contractId=' + ${customerContract.contractId}}">
                        <span class="text" th:text="${customerContract?.orderNumber?:''}"></span>
                    </a>
                </td>
                <td>创建人：<span class="text" th:text="${customerContract?.createPeopleName?:''}"></span></td>
            </tr>
            <tr>
                <td>所属分公司：<span class="text" th:text="${customerContract?.companyName?:''}"></span></td>
                <td>创建时间：<span class="text" th:text="${#dates.format(customerContract?.createTm, 'yyyy-MM-dd HH:mm')}"></span></td>
                <td>
                    合同状态：
                    <span class="text" th:switch="${customerContract?.contractStatus?:''}">
                        <span th:case="1">未生效</span>
                        <span th:case="2">生效中</span>
                        <span th:case="3">已结束</span>
                        <span th:case="4">已作废</span>
                        <span th:case="5">意外终止</span>
                    </span>
                </td>
            </tr>
        </table>
    </div>
    <br />
    <div class="subheading">
        <p>基本信息</p>
        <div style="padding-right: 20px" th:if="${customerContract?.contractReviewStatus?:''} == 3">
            <button type="button" class="btn btn-primary pull-right"  data-dismiss="modal"   onclick="editMessage()">编辑</button>
        </div>
        <div class="centerContantTwo">
            <table>
                <tr>
                    <td>
                        合同类型：
                        <span class="text" th:switch="${customerContract?.contractType?:''}">
                            <span th:case="1">非会员合同</span>
                            <span th:case="2">会员新单合同</span>
                            <span th:case="3">活动合同</span>
                            <span th:case="4">会员续费合同</span>
                            <span th:case="5">兑换合同</span>
                            <span th:case="6">单品合同</span>
                            <span th:case="7">会员单次合同</span>
                        </span>
                    </td>
                    <td>客户名称：<span class="text" th:text="${customerContract?.customerName?:''}"></span></td>
                    <td>客户联系人：<span class="text" id="customerContact" th:text="${customerContract?.contactName?:''}"></span></td>
                </tr>
                <tr>
                    <td>联系方式：
                        <span>
                            <span class="text off-outline-text" th:text="${customerContract?.contactDetails?:''}"></span> <span id="eye" class="mdi mdi-eye-off-outline outline-text"></span>
                        </span>
                        <span style="display: none">
                            <span class="text to-outline-text" th:text="${customerContract?.contactDetails?:''}"></span> <span class="mdi mdi-eye-outline outline-text"></span>
                        </span>

                    </td>
                    <td>客户邮箱：<span class="text" th:text="${customerContract?.customerEmail?:''}"></span></td>
                    <td>
                        合作开发人员：
                        <span>
                            <a href="#!" data-toggle="modal" data-target="#cooperateModal">查看</a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>会员主合同：
                        <a class="js-create-tab" data-title="主合同信息" th:if="${not #strings.isEmpty(customerContract.masterMembershipContract)}" th:attr="data-url=@{'/front/contractManager/contractDetail?contractId='+ ${customerContract.masterMembershipContract}}">查看
                        </a>
                    </td>
                    <td>
                        合同起止日期：
                        <span class="text"  id="starTime" th:text="${#dates.format(customerContract?.contractStartDate, 'yyyy-MM-dd')}"></span>至
                        <span class="text"  id="endTime" th:text="${#dates.format(customerContract?.contractEndDate, 'yyyy-MM-dd')}"></span>
                    </td>
                    <td>回款日期：<span class="text" th:text="${#dates.format(customerContract?.payBackDate, 'yyyy-MM-dd')}"></span></td>
                </tr>
                <tr>
                    <td>付款账号：<span class="text" th:text="${customerContract?.paymentAccount?:''}"></span></td>
                    <td>
                        支付方式：
                        <span class="text" th:switch="${customerContract?.paymentMethod?:''}">
                            <span th:case="2">线下支付</span>
                            <span th:case="3">余额支付</span>
                            <span th:case="4">转入额支付</span>
                            <span th:case="5">余额+转入额支付</span>
                        </span>
                    </td>
                    <td>关联跟进记录：
                        <a class="js-create-tab" data-title="跟进详情" th:if="${not #strings.isEmpty(customerContract.followRecordId)}" th:attr="data-url=@{'/front/customerManager/customerFollowRecordDetail?clueFollowId='+ ${customerContract.followRecordId}}">查看
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        关联赢单商机：
                        <a class="js-create-tab" data-title="商机详情" th:if="${not #strings.isEmpty(customerContract.opportunityId)}" th:attr="data-url=@{'/front//user/opportunityManager/userOpportunityDetail?opportunityId='+ ${customerContract.opportunityId}}">查看
                        </a>
                    </td>
                    <td>
                        是否加盖公章：
                        <span class="text" th:switch="${customerContract?.applyElectronicContract?:''}">
                            <span th:case="1">是</span>
                            <span th:case="0">否</span>
                        </span>
                    </td>
                    <td>
                        是否保密：
                        <span class="text" th:switch="${customerContract?.whetherKeepSecret?:''}">
                            <span th:case="1">是</span>
                            <span th:case="0">否</span>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>
                        提前/延期原因：
                        <span class="text" th:text="${customerContract?.advancePostponementReason?:''}"></span>
                    </td>
                    <td class="annex-label">
                        合同附件：
                        <a href="#!" onclick="showFile(0);">查看</a>
                    </td>
                    <td class="examine-label">
                        审核附件：
                        <a href="#!" onclick="showFile(1);">查看</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <br />
    <div class="subheading">
        <p>合同金额</p>
        <div class="centerContant centerContantMoney">
            <div><span class="after-content blueColor">合同总金额</span><span class="text AmountData " th:text="${customerContract?.contractTotalAmount?:''}"></span></div>
            <div><span class="after-content yellowColor">合同优惠总金额</span> <span class="text AmountData " th:text="${customerContract?.contractDiscountTotalAmount?:''}"></span></div>
            <div><span class="after-content greenColor">合同实际总金额</span><span class="text AmountData " th:text="${customerContract?.contractActualTotalAmount?:''}"></span></div>
            <div><span class="after-content redColor">应收款</span><span class="text AmountData " th:text="${customerContract?.contractReceivables?:''}"></span></div>
        </div>
    </div>
    <br />
    <div class="subheading">
        <p>回款情况</p>
        <div style="background: #FFFFFF;margin: 20px 20px 0 20px">
            <table id="paymentSituationTable"></table>
        </div>
        <div class="titleTherr">
            <span>总计应回款：<span class="text" th:text="${financeProductOderInfo?.orderActualTotalAmount?:''}"></span></span>
            <span>目前回款：<span class="text" th:text="${financeProductOderInfo?.returnMoneyAmount?:''}"></span></span>
            <span>尾款：<span class="text" th:text="${financeProductOderInfo?.residueMoneyAmount?:''}"></span></span>
        </div>
    </div>
    <br />
    <div class="subheading">
        <p>审核状态</p>
        <div class="centerContant centerContantStatus">
            <div>状态： <span class="text" id="contractReviewStatus" th:switch="${customerContract?.contractReviewStatus?:''}">
                            <span th:case="0">未审核</span>
                            <span th:case="1">审核中</span>
                            <span th:case="2">审核通过</span>
                            <span th:case="3">审核失败</span>
                            <span th:case="4">审核通过并盖章</span>
                        </span>
            </div>
            <div th:if="${customerContract?.contractReviewStatus?:''} != 0">处理结果：<span class="text" id="processResult" th:switch="${contractReview?.processResult?:''}">
                            <span th:case="1">补充材料</span>
                            <span th:case="2">审核通过</span>
                            <span th:case="3">审核未通过</span>
                            <span th:case="4">审核通过并盖章</span>
                         </span>
            </div>
            <div th:if="${customerContract?.contractReviewStatus?:''} != 0">审核人：<span class="text" th:text="${contractReview?.createPeopleName?:''}"></span></div>
            <div th:if="${customerContract?.contractReviewStatus?:''} != 0">审核时间：<span class="text" th:text="${#dates.format(contractReview?.createTm, 'yyyy-MM-dd')}"></span></div>
            <div th:if="${customerContract?.contractReviewStatus?:''} != 0">审核备注：<span class="text" th:text="${contractReview?.contractReviewNotes?:''}"></span></div>
            <div th:if="${customerContract?.contractReviewStatus?:''} != 0">审核不符类型：<span class="text" th:switch="${contractReview?.contractReviewType?:''}">
                            <span th:case="1">联系人/联系方式不准确</span>
                            <span th:case="2">跟进记录/商机不符</span>
                            <span th:case="3">合同日期不对</span>
                            <span th:case="4">合同款项不正确</span>
                            <span th:case="5">回款关联有误</span>
                            <span th:case="6">优惠特批未通过</span>
                            <span th:case="7">合同类型不符</span>
                            </span>
            </div>
            <div class="file-group" th:if="${showFlag}">
                <h5 class="label-required">补充材料</h5>
                <!--<input type="file" id="file" class="hidden" />
                <input type="hidden" id="contractPic" class="image-id">
                <div class="img-box"></div>
                <button class="btn btn-default file-browser" type="button">选择补充材料</button>-->
                <div class="file-box">
                    <input type="file" id="file" class="hidden" />
                    <label for="file" class="form-control" id="fileLabel">选择补充材料</label>
                    <button class="btn btn-primary" type="button" onclick="uploadReplenishAnnex()">提交</button>
                </div>
            </div>
        </div>
    </div>
    <br />
    <div class="subheading">
        <p>会员产品</p>
        <div style="background: #FFFFFF;margin: 20px 20px 20px 20px">
        <table id="memberFinishOrderProductTable"></table>
        </div>
    </div>
    <br />
    <div class="subheading">
        <p>非会员产品</p>
        <div style="background: #FFFFFF;margin: 20px 20px 20px 20px">
        <table id="nonMemberFinishOrderProductTable"></table>
        </div>
    </div>
</div>
<div style="height: 15px"></div>
<!-- 附件预览 -->
<div class="modal fade bs-example-modal-lg fileModal" tabindex="-1" role="dialog" id="fileModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4>附件预览</h4>
            </div>
            <div class="modal-body">
                <iframe src="" frameborder="0" id="fileIframe"></iframe>
            </div>
        </div>
    </div>
</div>
<!-- 产品详细信息 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="productInfo">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">产品详细信息</h4>
            </div>
            <div class="modal-body">
                <div class="well form-well">
                    <h3>会员卡信息</h3>
                    <div id="cardInfolist">
                        <!--                        <div class="card-info clearfix" id="cardInfo">-->
                        <!--                            <div class="code" id="cardCode"></div>-->
                        <!--                            <div class="pull-left">-->
                        <!--                                <h5>卡号：<span id="cardNum"></span></h5>-->
                        <!--                                <p>密码：<span id="cardPassword">*********</span></p>-->
                        <!--                                <p>有效期：<span id="cardDays">****.**.** 至 ****.**.**</span></p>-->
                        <!--                            </div>-->
                        <!--                            <div class="btn-box" id="carInfoBox">-->
                        <!--                                <p><span>暂无会员卡，请点击按钮申请会员卡</span></p>-->
                        <!--                                <button type="button" class="btn btn-primary" id="applyCard">申请会员卡</button>-->
                        <!--                            </div>-->
                        <!--                        </div>-->

                    </div>

                </div>
                <div class="well form-well">
                    <h3>税法直通车信息</h3>
                    <div id="taxLawCardInfoList">
                        <!--                        <div class="card-info clearfix" id="taxLawCardInfo" style="height: 100px">-->
                        <!--                            <div class="pull-left">-->
                        <!--                                <h5>卡号：<span id="taxLawCardNum"></span></h5>-->
                        <!--                                <p>密码：<span id="taxLawCardPassword">*********</span></p>-->
                        <!--                            </div>-->
                        <!--                            <div class="btn-box">-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>

                </div>
                <div class="well form-well">
                    <h3>兑换码信息</h3>
                    <div id="exchangeCardInfoBox">

                    </div>
                    <!--                    <div class="card-info clearfix" id="exchangeCardInfo"  style="height: 100px">-->
                    <!--                        <div class="pull-left">-->
                    <!--                            <h5>卡号：<span id="exchangeCardNum"></span></h5>-->
                    <!--                            <p>密码：<span id="exchangeCardPassword">*********</span></p>-->
                    <!--                        </div>-->
                    <!--                        <div class="btn-box">-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
                <div class="well form-well">
                    <h3>云顾问卡信息</h3>
                    <div id="cloudAdvisorCardInfoBox">

                    </div>
                    <!--                    <div class="card-info clearfix" id="cloudAdvisorCardInfo"  style="height: 100px">-->
                    <!--                        <div class="pull-left">-->
                    <!--                            <h5>卡号：<span id="cloudAdvisorCardNum"></span></h5>-->
                    <!--                            <p>密码：<span id="cloudAdvisorCardPassword">*********</span></p>-->
                    <!--                        </div>-->
                    <!--                        <div class="btn-box">-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
                <div class="well form-well">
                    <h3>充值卡信息</h3>
                    <div id="rechargeCardInfoBox"></div>
                    <!--                    <div class="card-info clearfix" id="rechargeCardInfo"  style="height: 100px">-->
                    <!--                        <div class="pull-left">-->
                    <!--                            <h5>卡号：<span id="rechargeCardNum"></span></h5>-->
                    <!--                            <p>密码：<span id="rechargeCardPassword">*********</span></p>-->
                    <!--                        </div>-->
                    <!--                        <div class="btn-box">-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
                <div class="well form-well">
                    <h3>优惠券信息</h3>
                    <div id="couponsCardInfoBox"></div>
                    <!--                    <div class="card-info clearfix" id="couponsCardInfo"  style="height: 100px">-->
                    <!--                        <div class="pull-left">-->
                    <!--                            <h5>优惠卷码：<span id="couponsCardNum"></span></h5>-->
                    <!--                            <p>优惠券名称：<span id="couponsCardPassword">*********</span></p>-->
                    <!--                        </div>-->
                    <!--                        <div class="btn-box">-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
                <div class="well form-well isShow">
                    <h3>线上课程</h3>
                    <table id="onlineCourse"></table>
                </div>
                <div class="well form-well isShow">
                    <h3>线下课程</h3>
                    <table id="offlineCourse"></table>
                </div>
                <div class="well form-well isShow">
                    <h3>增值服务</h3>
                    <table id="valueAddedServices"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="expensesRecord">
    <div class="modal-dialog modal-lg" role="document" style="width: 90%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <iframe src="" frameborder="0" id="expensesRecordIframe"></iframe>
            </div>
        </div>
    </div>
</div>
<!-- 合作开发人员列表 -->
<div class="modal fade" tabindex="-1" role="dialog" id="cooperateModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4>合作开发人员</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 18px;">
                <table id="cooperateTable"></table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="editInformation" tabindex="-1" role="dialog" aria-labelledby="editInformation" >
    <div class="modal-dialog" role="document" style="width: 50%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="cancel()"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body">
                <form id="effectiveness" class="well form-well">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                            <label class="control-label label-required">客户联系人</label>
                            <div class="form-content">
                                <select type="text" id="customerContractList" class="form-control" title="请选择客户联系人" data-live-search="true"  name="customerContractList"></select>
                                <input type="text" name="customerContractName" placeholder="请输入客户联系人" id="customerContractName" class="form-control" style="display: none;">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
                            <label class="control-label label-required">联系方式</label>
                            <div class="form-content">
                                <input type="text" class="form-control" placeholder="请先选择客户联系人" id="phoneNumber" name="phoneNumber">
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 isMember form-group">
                            <label class="control-label label-required">合同起止日期</label>
                            <div class="form-content">
                                <input type="text" class="form-control" id="contractDate" name="contractDate" placeholder="请选择合同起止日期" autocomplete="off" th:value="${#dates.format(customerContract?.contractStartDate, 'yyyy-MM-dd')+' 至 '+#dates.format(customerContract?.contractEndDate, 'yyyy-MM-dd')}">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="submit()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="/js/bootstrapValidator.min.js"></script>
<!-- 拖动 -->
<script src="/js/bootstrap-table/extensions/resizable/bootstrap-table-resizable.min.js"></script>
<script src="/js/crm/common/colResizable-1.6.min.js"></script>
<!-- 图片上传插件 -->
<script type="text/javascript" src="/js/upload.img.js"></script>
<!--时间选择插件-->
<script src="/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="/js/crm/common/dataRangePicker.min.js"></script>
<!--table固定列-->
<script type="text/javascript" src="/js/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<!--公共js-->
<script src="/js/crm/common/common.js"></script>
<!-- 多选框下拉 -->
<script type="text/javascript" src="/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="/js/bootstrap-select.js"></script>
<!--图片查看-->
<script type="text/javascript" src="/js/viewer.js"></script>
<script type="text/javascript" src="/js/jquery-viewer.js"></script>
<script type="text/javascript" src="/js/crm/contractManager/contractDetail.js"></script>
</html>